<template>
  <div> <!-- 新增的根元素 -->
    <div class="fill-parent" :dg-chart-auto-resize="true" :dg-chart-options="chartOptions">
      <div class="head">

<!--        <div class="title"><label>DataGear看板</label></div>-->
      </div>
      <div class="content">
        <div class="layout layout-left-top">
          <div class="panel panel-bg no-title-bg">
<!--            <div class="title"><label>温度</label></div>-->
            <div class="chart" dg-chart-widget>
              <div style="width:100%;height:100%;" dg-chart-widget="d107e15d718f041dfaef"><!--温度-时间--></div>
            </div>
          </div>
        </div>
        <!-- ... 其他布局和面板代码 ... -->
      </div>
    </div>

    <div class="app-container home">
      <div>
<!--        <div class="signOut" @click="fullscreen" v-if="!winfull.full">-->
<!--          <el-button>放大</el-button>-->
<!--        </div>-->
<!--        <div class="signOut" @click="nofullscreen" v-else>-->
<!--          <el-button>退出</el-button>-->
<!--        </div>-->
<!--        <el-button @click="changePage">跳转页面</el-button>-->
      </div>
    </div>
  </div> <!-- 根元素结束 -->
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      chartOptions: {
        title: {
          show: false
        },
        legend: {
          top: 0
        },
        grid: {
          top: 25
        }
      },
      themeOptions: {
        color: '#F0F0F0',
        actualBackgroundColor: '#142233'
      },
      winfull: {
        full: false
      }
    };
  },
  activated() {
    this.fullscreen();
  },
  methods: {
    fullscreen() {
      const isFullScreen = document.fullscreenElement || document.webkitFullscreenElement;
      this.winfull.full = true;
      this.$store.dispatch("app/toggleSideBarHide", true);
      this.$store.dispatch("settings/setNavbar_tags", false);
      document.querySelector('.navbar').style.display = "none";
      document.querySelector('.tags-view-container').style.display = "none";
    },
    nofullscreen() {
      this.winfull.full = false;
      this.$store.dispatch("app/toggleSideBarHide", false);
      this.$store.dispatch("settings/setNavbar_tags", true);
      document.querySelector('.navbar').style.display = "";
      document.querySelector('.tags-view-container').style.display = "";
    },
    changePage() {
      this.$router.push({ path: "/system/user" });
      this.nofullscreen();
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
